<!--服务质量定查日检查结果汇总表-->
<template>
  <div class="public-common">
    <div class="public-title">服务定查日检查结果上报列表</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="报表月份">
            <el-date-picker style="width: 100%;" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.yue" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
          <el-button type="primary" icon="el-icon-tickets" @click="dialogVisible=true">新建</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="报表月份" fixed="left" prop="a1">
      </el-table-column>
      <el-table-column label="上报日期" prop="a2">
      </el-table-column>
      <el-table-column label="在册车数" prop="a3">
      </el-table-column>
      <el-table-column label="正在更新车数" prop="a4">
      </el-table-column>
      <el-table-column label="报停车数" prop="a5">
      </el-table-column>
      <el-table-column label="事故车数" prop="a6">
      </el-table-column>
      <el-table-column label="应检查车数" prop="a7">
      </el-table-column>
      <el-table-column label="未到车数" prop="a8">
      </el-table-column>
      <el-table-column label="实际检查车数" prop="a9">
      </el-table-column>
      <el-table-column label="合格车数" prop="a10">
      </el-table-column>
      <el-table-column label="受检查车率" prop="a11">
      </el-table-column>
      <el-table-column label="合格率" prop="a12">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.now"
      :page-sizes="page.sizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      style="margin-top:10px;">
    </el-pagination>
    <el-dialog title="服务定查日检查结果上报" :visible.sync="dialogVisible" width="80%">
      <el-form label-width="80px" class="qysb-form-f">
        <el-scrollbar style="height:100%;">
          <div class="fuwukab">服务定查日检查结果上报</div>
          <p style="color: #d21706;">请次月5日之前上报本月报表。</p>

          <table class="border-table">
            <tbody>
              <tr>
                <th style="width: 80px">在册车数</th>
                <th colspan="3">正在更新车数</th>
                <th colspan="3">报停车数</th>
                <th colspan="4">事故车数</th>
                <th colspan="4">应检查车数</th>
                <th colspan="3">未到车数</th>
                <th colspan="3">实际检查车数</th>
              </tr>
              <tr>
                <td>
                  <div id="txtRegeditCount_Container" style="display:inline;" class=" readonly">
                    <input type="text" maxlength="4" autocomplete="off" id="txtRegeditCount" name="txtRegeditCount"
                      class=" x-form-text x-form-field x-form-num-field x-item-disabled" disabled="" style="width: 52px;"></div>
                  台
                </td>
                <td colspan="3">
                  <div id="txtUpdateCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtUpdateCount" name="txtUpdateCount" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 52px;"></div>
                  台
                </td>
                <td colspan="3">
                  <div id="txtStopCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtStopCount" name="txtStopCount" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 52px;"></div>
                  台
                </td>
                <td colspan="4">
                  <div id="txtAccidentCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtAccidentCount" name="txtAccidentCount"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 52px;"></div>
                  台
                </td>
                <td colspan="4">
                  <div id="txtShouldCheckCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtShouldCheckCount" name="txtShouldCheckCount"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 52px;"></div>
                  台
                </td>
                <td colspan="3">
                  <div id="txtNoCheckCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtNoCheckCount" name="txtNoCheckCount"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 52px;"></div>
                  台
                </td>
                <td colspan="3">
                  <div id="txtActualCheckCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtActualCheckCount" name="txtActualCheckCount"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 52px;"></div>
                  台
                </td>
              </tr>
              <tr>
                <th>结果</th>
                <td colspan="5">合格车数：
                  <div id="txtQualifiedCount_Container" style="display:inline;">
                    <input type="text" maxlength="4" autocomplete="off" id="txtQualifiedCount" name="txtQualifiedCount"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 52px;"></div>
                  台
                </td>
                <td colspan="5">受检查车率：
                  <div id="txtCheckRate_Container" style="display:inline;">
                    <input type="text" maxlength="3" autocomplete="off" id="txtCheckRate" name="txtCheckRate" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 52px;"></div>
                  %
                </td>
                <td colspan="10">
                  合格率：<div id="txtPassRate_Container" style="display:inline;">
                    <input type="text" maxlength="3" autocomplete="off" id="txtPassRate" name="txtPassRate" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 52px;"></div>
                  %
                </td>
              </tr>
              <tr>
                <th rowspan="3">不合格数</th>
                <th rowspan="2">检查<br>项目</th>
                <th colspan="4">车容车貌</th>
                <th colspan="5">服务设施</th>
                <th colspan="3">驾驶员</th>
                <th rowspan="2">营运证</th>
                <th rowspan="2">营运证<br>标志</th>
                <th rowspan="2">租价<br>标签</th>
                <th colspan="3">计价器</th>
                <th rowspan="2">小计</th>
              </tr>
              <tr>
                <th style="height: 100px">车外<br>卫生差</th>
                <th>
                  车内<br>
                  卫生差
                </th>
                <th>
                  花脸车
                </th>
                <th>
                  乱贴<br>
                  广告
                </th>
                <th>
                  无顶灯
                </th>
                <th>
                  无座套
                </th>
                <th>
                  无门徽<br>
                  （不清）
                </th>
                <th>
                  无监督<br>
                  电话
                </th>
                <th>
                  无监督卡架<br>
                  （未固定）
                </th>
                <th>
                  衣着<br>
                  仪表差
                </th>
                <th>
                  无<br>
                  资格证
                </th>
                <th>
                  无<br>
                  监督卡
                </th>

                <th>
                  K值<br>
                  不准
                </th>
                <th>
                  无铅封
                </th>
                <th>
                  检测<br>
                  过期
                </th>

              </tr>
              <tr>
                <th>
                  台
                </th>
                <td>
                  <div id="txtOuterHealth_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtOuterHealth" name="txtOuterHealth" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtInnerHealth_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtInnerHealth" name="txtInnerHealth" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtDilapidation_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtDilapidation" name="txtDilapidation"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtPasteads_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtPasteads" name="txtPasteads" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoTopLight_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoTopLight" name="txtNoTopLight" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoSeating_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoSeating" name="txtNoSeating" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoDooremblem_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoDooremblem" name="txtNoDooremblem"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoServicePhone_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoServicePhone" name="txtNoServicePhone"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoServiceCardBracket_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoServiceCardBracket" name="txtNoServiceCardBracket"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtClothingBad_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtClothingBad" name="txtClothingBad" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoQualificatory_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoQualificatory" name="txtNoQualificatory"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoServiceCard_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoServiceCard" name="txtNoServiceCard"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoWorkingCard_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoWorkingCard" name="txtNoWorkingCard"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoWorkingSign_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoWorkingSign" name="txtNoWorkingSign"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtPricesTag_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtPricesTag" name="txtPricesTag" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtKValueInaccurate_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtKValueInaccurate" name="txtKValueInaccurate"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtNoSeal_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtNoSeal" name="txtNoSeal" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtCheckExpired_Container" style="display:inline;">

                    <input type="text" maxlength="3" autocomplete="off" id="txtCheckExpired" name="txtCheckExpired"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 22px;"></div>
                </td>
                <td>
                  <div id="txtCheckTotal_Container" style="display:inline;" class=" disabled">

                    <input type="text" maxlength="3" autocomplete="off" id="txtCheckTotal" name="txtCheckTotal" class=" x-form-text x-form-field x-form-num-field "
                      style="width: 22px;"></div>
                </td>
              </tr>
              <tr>
                <th>
                  意见
                </th>
                <td colspan="20" style="text-align: left; height: 65px">
                  <div id="txtMemo_Container" style="display:inline;">

                    <textarea style="width: 99%; height: 54px;" autocomplete="off" id="txtMemo" name="txtMemo" class=" x-form-textarea x-form-field"></textarea></div>
                </td>
              </tr>
              <tr>
                <th>
                  检查人签字
                </th>
                <td colspan="12" style="text-align: left;">
                  <div id="txtCheckMan_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtCheckMan" name="txtCheckMan" class=" x-form-text x-form-field "
                      style="width: 95%;"></div>
                </td>
                <th>
                  经营单位
                </th>
                <td colspan="7" style="text-align: left;">
                  <div id="txbComName_Container" style="display:inline;" class=" disabled">

                    <input type="text" size="20" autocomplete="off" id="txbComName" name="txbComName" class=" x-form-text x-form-field "
                      style="width: 95%;"></div>
                </td>
              </tr>
            </tbody>
          </table>


          <div style="text-align:center;margin-top:6px;">
            <el-button type="primary" @click="">确认</el-button>
            <el-button type="primary" @click="">上报</el-button>
            <el-button type="info" size="small" @click="dialogVisible=false">取消</el-button>
          </div>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tabledata: [
          {
              a1: '2018-09',
              a2: '2018-09-10',
              a3: '15辆',
              a4: '5辆',
              a5: '3辆',
              a6: '2辆',
              a7: '1辆',
              a8: '1辆',
              a9: '1辆',
              a10: '10辆',
              a11: '3辆',
              a12: '90%',
          },
          {
              a1: '2018-10',
              a2: '2018-10-10',
              a3: '35辆',
              a4: '15辆',
              a5: '3辆',
              a6: '12辆',
              a7: '1辆',
              a8: '1辆',
              a9: '1辆',
              a10: '20辆',
              a11: '3辆',
              a12: '85%',
          },
          {
              a1: '2018-11',
              a2: '2018-11-10',
              a3: '45辆',
              a4: '5辆',
              a5: '3辆',
              a6: '2辆',
              a7: '1辆',
              a8: '1辆',
              a9: '1辆',
              a10: '22辆',
              a11: '3辆',
              a12: '80%',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          yue: '',
          ming: ''
        },
      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>
  .cyqlabel .el-form-item__label {
    width: 100px !important;
  }

  .cyqlabel .el-form-item__content {
    margin-left: 100px !important;
  }

  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .border-table {
    width: 100%;
    display: table;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-collapse: collapse !important;
    border-spacing: 0px !important;
  }

  .border-table th,
  .border-table td {
    padding: 10px 0;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-left: 2px;
    /* padding-bottom: 2px !important; */
    text-align: center;
    vertical-align: middle;
    min-width: 40px;
  }
</style>
